clear属性 清除浮动

clear清除元素浮动

clear属性的值
left 清除元素向左的浮动
right 清除元素向右的浮动
both 左右的浮动均去除
inherit 清除父级继承来的浮动

清除浮动的方式

  1. 可以在要清除浮动的元素中使用clear:both来清除浮动对页面的影响，但是父元素如果没有高度就不会被撑开。
  2. 可以在父元素中再建一个子元素，清除这个子元素的浮动，即使父元素没有高度也会被撑开。但是：一般情况是不会使用这俩种方法来清除浮动的，因为这俩种方法会增加页面的标签。
  3. 使用overflow属性来清除浮动：先找到浮动盒子的父元素，给他添加overflow:hidden，就清除了这个父元素中的子元素浮动对页面的影响，而且父元素也会被撑开。一般情况下也不要使用这种方式，因为overflow:hidden会隐藏超出这个元素所占区域的内容。

  4. 使用伪元素,在父元素里面的最后边，添加一个高和行高都为0的空块级元素，清除子元素的浮动。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .clearfix:after{
        content:"";
        height: 0;
        line-height: 0;
        display: block;
        clear: both;
        visibility: hidden;  
    }
    .clearfix{
        * zoom: 1;    // 兼容ie6 7
    }        
    <div class="father clearfix">
        <div class="son"></div>
    </div>

  5. 或者使用双伪元素来清除浮动,HTML不变，如上，CSS样式改成以下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .clearfix::before,.clearfix::after{
        content: '';
        display: block;
        line-height: 0;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .clearfix{       
        *zoom:1;    /* 兼容ie6 7 */
    }
× 请我吃糖~
打赏二维码